<template>
  <!-- 旅游资讯首页 -->

  <div class="box">
    <div class="box-main">
      <div class="img">
        <router-link :to="{ name: 'travel-news' }">
          <img src="../assets/旅游资讯@3x.png" alt="" />
        </router-link>
      </div>
      <div class="concent">
        <span>啥是佩琦？来盐城过年，赏花灯、泡温…</span>
        <span>盐城美食，还是记忆中的味道</span>
        <span>盐城的诗意生活，从翻开这本美丽日历开始</span>
      </div>
      <button><router-link :to="{ name: 'travel-news' }">更多</router-link></button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 375px;
  height: 80px;
  display: flex;
  align-items: center;

  // border: solid;
  .box-main {
    width: 345px;
    height: 65px;
    display: flex;
    justify-content: space-between;
    // border: solid;
    margin-left: 12px;
    background-color: #FDFDFD;
    .concent{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      span{
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #333333;
        width: 216px;
      }
    }

    .img {
      width: 65px;
      height: 65px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 35px;
        height: 36.7px;
      }
    }

    button {
      width: 50px;
      height: 64px;
      background: #f6f6f6;
      border-radius: 0px 3.5px 3.5px 0px;
      border: none;
    }
  }
}</style>
